<template>
	<div class="sc-cropper">
		<div class="sc-cropper__img">
			<img :src="src" ref="img">
		</div>
<!--		<div class="sc-cropper__preview">-->
<!--			<h4>图像预览</h4>-->
<!--			<div class="sc-cropper__preview__img" ref="preview"></div>-->
<!--		</div>-->
	</div>
</template>

<script>
	import Cropper from 'cropperjs'
	import 'cropperjs/dist/cropper.css'

	export default {
		props: {
			src: { type: String, default: "" },
			compress: {type: Number, default: 1},
			aspectRatio:  {type: Number, default: NaN},
			cWidth: {type: Number, default: NaN},
			cHeight: {type: Number, default: NaN},
		},
		data() {
			return {
				crop: null,
				canvasOptions: {}
			}
		},
		watch:{
			cWidth: {
				deep: true,
				immediate: true,
				handler: function(val) {
					if (!isNaN(val)) {
						this.canvasOptions.width = val
					}
				}
			},
			cHeight: {
				deep: true,
				immediate: true,
				handler: function(val) {
					if (!isNaN(val)) {
						this.canvasOptions.height = val
					}
				}
			},
			aspectRatio: {
				deep: true,
				immediate: true,
				handler: function(val) {
					this.crop && this.crop.setAspectRatio(val)
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				this.crop = new Cropper(this.$refs.img, {
					viewMode: 0,
					dragMode: 'none',
					responsive: false,
					aspectRatio: NaN,
					preview: this.$refs.preview,

				})

				if (this.aspectRatio && !isNaN(this.aspectRatio)) {
					this.crop.setAspectRatio(this.aspectRatio)
				}
			},
			setAspectRatio(aspectRatio){
				this.crop.setAspectRatio(aspectRatio)
			},
			getCropData(cb, type='image/jpeg'){
				cb(this.crop.getCroppedCanvas().toDataURL(type, this.compress))
			},
			getCropBlob(cb, type='image/jpeg'){
				this.crop.getCroppedCanvas().toBlob((blob) => {
					cb(blob)
				}, type, this.compress)
			},
			getCropFile(cb, fileName='fileName.jpg', type='image/jpeg') {
				this.crop.getCroppedCanvas(this.canvasOptions).toBlob((blob) => {
					let file = new File([blob], fileName, {type: type})
					cb(file)
				}, type, this.compress)
			}
		}
	}
</script>

<style scoped>
	.sc-cropper {height:200px;width: 200px!important;}
	.sc-cropper__img {height:100%;width:200px;float: left;background: #EBEEF5;}
	.sc-cropper__img img {display: none;}
	.sc-cropper__preview {width: 120px;margin-left: 20px;float: left;}
	.sc-cropper__preview h4 {font-weight: normal;font-size: 12px;color: #999;margin-bottom: 20px;}
	.sc-cropper__preview__img {overflow: hidden;width: 120px;height: 120px;border: 1px solid #ebeef5;}
</style>
